<template>
  <!-- 补 发 商 标 注 册 证 申 请 书 -->
  <div>
    <div class="total">
      <h1 style="margin-left: -400px;">补发商标注册证申请书</h1>
      <el-form :label-position="right" label-width="250px" size="mini">
        <el-form-item label="申请人名称 :">
          <span>{{record.appName}}</span>
        </el-form-item>
        <el-form-item label="申请人地址 :">
          <span>{{record.busAddress}}</span>
        </el-form-item>
        <el-form-item label="邮政编码 :">
          <span>{{record.postCode}}</span>
        </el-form-item>
        <el-form-item label="联系人 :">
          <span>{{record.contacts}}</span>
        </el-form-item>
         <el-form-item label="邮箱 :">
          <span>{{record.email}}</span>
        </el-form-item>
        <el-form-item label="电话 :">
          <span>{{record.phone}}</span>
        </el-form-item>
        <!-- <el-form-item label="代理机构名称 :">
          <span>{{record.ageName}}</span>
        </el-form-item> -->
        <el-form-item label="商标注册号 :">
          <span>{{record.appCode}}</span>
        </el-form-item>
        <el-form-item label="申请补证理由 :">
          <span>{{record.reasons}}</span>
        </el-form-item>
        <el-form-item label="营业执照:" class="business">
         
             <imgshow> <img :src="mconfig.host+record.busimg" alt />
          </imgshow>
           
        
        </el-form-item>
         <el-form-item label="身份证 :" class="idcar" v-show="record.visit">
          <imgshow><img :src="mconfig.host+record.idcardimg" alt />
          </imgshow>
            
         
        </el-form-item>
        <el-form-item label="网上确认书:" class="business">
         
             <imgshow> <img :src="mconfig.host+record.qrfile" alt />
          </imgshow>
        </el-form-item>
        <el-form-item label="其他附件 :" v-if="record.otherfile.length > 0" class="business">
          <imgshow v-for="item, index in record.otherfile" :key="index"> <img :src="mconfig.host + item" alt />
          </imgshow>
        </el-form-item>
      </el-form>
    </div>
    

    <!-- 签字/章戳 -->
 <div class="signs">
      <!-- <div class="sign">
        <div>
          <span>申请人章戳(签字) :</span>
        </div>
        <div>
          <span>代理机构章戳 :</span>
        </div>
      </div>
      <div class="agent">
        <p>代理人签字:</p>
      </div>
      <p class="careful">注：请 按 说 明 填 写</p>-->
    </div>
  </div>
</template>
<script>
import imgshow from '../common/imgshow'
export default {
   components:{
    imgshow
    },
  name: "businessForm8",
  data() {
    return {
      modify: "修改",
      HideDisplay: false,
      right: "right",
      
      record: {
        ageName: "", //代理机构名称
        appAddCn: "", //申请人地址
        appNameCn: "", //申请人名称
        appNum: "", //商标注册号
        branchNetworkId: "", //网点编号
        codeCredit: "", // 原商标申请号
        contacts: "", //联系人
        id: "", //主键
        img_path: "", //图片地址
        phone: "", //电话
        postCode: "", //邮政编码
        subStatus: "", //状态 1保存 2选择通过 3选择未通过 4未审核
        proAppendJson: "", //共享人 json
        reasons: "", //申请补证理由
        userId: "", //用户id
        busimg: "", //营业执照
        idcardimg :"",//身份证
        visit:false,
       
      },
    };
  },
  methods: {
    //接口获取到数据
    interface(e) {
      this.$http
        .get("/trademark/proTReissue/findByIdDetl", {
          params: { id: e },
        })
        .then((res) => {
            this.record = res.data.data.data;
            this.record.otherfile = JSON.parse(this.record.otherfile);
            this.record.appAddr = res.data.data.data.appAddr;
            this.busimg = res.data.data.data.busimg;
            this.idcardimg = res.data.data.data.idcardimg;
            if(this.idcardimg.length){
                this.record.visit = true
            }else{
                this.record.visit = false
            }
        });
        
    },

    //
  },

  mounted() {
    this.id = this.$route.query.id;
    this.interface(this.id);
    console.log(this.record);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.total {
  width: 1200px;
 
  margin-left: 170px;
}
.total h1 {
  padding: 30px 0 20px 0;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  /* color: #666; */
  /* letter-spacing:0.5em */
}
/* .el-form {
  margin-left: 248px;
  border: 1px solid red;
} */
.total div {
  margin-bottom: 0;
}
/* 签字 */
.signs {
  margin-top: 150px;
}
.sign {
  display: flex;
  justify-content: center;
}
.sign div {
  width: 300px;
  margin: 15px;
  margin-left: 80px;
}
.sign div span {
  color: #000;
}
.el-form-item{
  padding: 6px 0;
}
/* 代理人 */
.signs .agent {
  margin-top: 80px;
  margin-right: 446px;
  text-align: right;
}
.signs .careful {
  margin-top: 100px;
  margin-left: 310px;
  color: #999;
}
.license{
  width: 500px;
}
.identity{
  display: inline-block;
  margin: 0 5px;
  width: 350px;
}


</style>